<nz-layout class="layout">
  <nz-sider nzTheme="light" [nzWidth]="siderWidth" nz-resizable [nzMinWidth]="120" [nzMaxWidth]="400"
    (nzResize)="onSideResize($event)" (nzResizeEnd)="onResizeEnd()">
    <!-- <div class="side-container"> -->
    <nz-content class="api-container-tabs">
      <nz-tabset nzCentered [nzAnimated]="false" [(nzSelectedIndex)]="tabsIndex">
        <nz-tab [nzTitle]="apiTitle">
          <ng-template #apiTitle>
            <span i18n-nzTooltipTitle nzTooltipTitle="Collections" nz-tooltip [nzTooltipMouseEnterDelay]="0.7" class="text-lg tab-content">
              <eo-iconpark-icon name="folder-open"></eo-iconpark-icon>
            </span>
          </ng-template>
          <div class="inner-content">
            <eo-api-group-tree></eo-api-group-tree>
          </div>
        </nz-tab>
        <nz-tab [nzTitle]="historyTitle">
          <ng-template #historyTitle>
            <span i18n-nzTooltipTitle nzTooltipTitle="History" nz-tooltip  [nzTooltipMouseEnterDelay]="0.7" class="text-lg tab-content">
              <eo-iconpark-icon name="history"></eo-iconpark-icon>
            </span>
          </ng-template>
          <eo-history></eo-history>
        </nz-tab>
      </nz-tabset>
    </nz-content>
    <nz-resize-handle nzDirection="right">
      <div class="sider-resize-line" [ngClass]="{'is-drag': isDragging}"> <i></i><i></i><i></i><i></i></div>
    </nz-resize-handle>
    <!-- </div> -->
  </nz-sider>
  <nz-layout class="right-layout">
    <nz-content>
      <div class="inner-content">
        <div class="flex items-center tabs-bar">
          <eo-api-tab class="fg1" [list]="apiTab.BASIC_TABS" [handleDataBeforeCache]="apiTab.handleDataBeforeCache"
            (beforeClose)="apiTab.beforeTabClose($event)" #apiTabComponent></eo-api-tab>
          <div class="flex items-center fix-mt">
            <nz-select [(ngModel)]="envUuid" [(nzOpen)]="isOpen" (nzOpenChange)="handleEnvSelectStatus($event)"
              [nzDropdownRender]="renderTemplate" nzAllowClear i18n-nzPlaceHolder="Environment Dropdown placeholder"
              nzPlaceHolder="Environment" #envSelect>
              <nz-option *ngFor="let item of envList" [nzValue]="item.uuid" [nzLabel]="item.name"></nz-option>
            </nz-select>
            <ng-template #renderTemplate>
              <nz-divider></nz-divider>
              <a class="text-sx manager-env" nz-button nzType="link" (click)="gotoEnvManager()" i18n>Manage
                Environment</a>
            </ng-template>
            <span class="flex items-center justify-center mx-1 icon" i18n-nzTooltipTitle nz-tooltip [nzTooltipMouseEnterDelay]="0.8" [nzTooltipMouseLeaveDelay]="0"
              nzTooltipTitle="Enviroment Quick Look" nz-popover [nzPopoverContent]="envParams"  nzTooltipPlacement="bottomRight"
              nzPopoverPlacement="bottomRight" nzPopoverTrigger="click">
              <eo-iconpark-icon name="eyes"></eo-iconpark-icon>
            </span>
            <ng-template #envParams>
              <env-list></env-list>
            </ng-template>
          </div>
        </div>
        <div class="content_container {{ this.id ? 'has_tab_page' : '' }}">
          <!-- Manually pick pageID,Because pageID always change -->
          <nz-tabset class="inside_page_tabset" *ngIf="this.id" nzLinkRouter>
            <nz-tab *ngFor="let tab of TABS">
              <a *nzTabLink nz-tab-link [routerLink]="[tab.routerLink]" queryParamsHandling="merge"> {{ tab.title }}</a>
            </nz-tab>
          </nz-tabset>
        </div>
        <!-- <eo-split-panel direction="row"> -->
        <section class="relative" [ngStyle]="{ paddingRight: activeBar ? dyWidth + 'px' : '40px' }">
          <!-- Get router child component by activate -->
          <router-outlet (activate)="onActivate($event)"></router-outlet>
          <eo-split-x *ngIf="activeBar" (x)="handleDrag($event)" [init]="[200, dyWidth, 400]"></eo-split-x>
          <div class="absolute top-0 bottom-0 right-0 flex right-bar" [ngClass]="{ 'left-line': !activeBar }"
            [ngStyle]="{ width: activeBar ? dyWidth + 'px' : '40px' }">
            <div class="flex items-center justify-center w-[40px] p-2 h-10 env-icon"
              [ngClass]="activeBar ? 'active' : ''" (click)="toggleRightBar()" nz-tooltip [nzTooltipMouseEnterDelay]="0.7" [nzTooltipMouseLeaveDelay]="0"
              i18n-nzTooltipTitle="@@Environment Setting" nzTooltipTitle="Environment Setting">
              <eo-iconpark-icon name="instruction"></eo-iconpark-icon>
            </div>
            <eo-env *ngIf="activeBar" class="flex-auto" (statusChange)="toggleRightBar(false)"></eo-env>
          </div>
        </section>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>
